<template>
	<view class="personal">
		<music-head title="个人中心" :showIcon="true" fontColor="black" :top="menuButtonInfo.top"></music-head>

		<view class="personal-head">
			<img :src="userInfo.avatarUrl" alt="" />
			<view class="user-box">
				<view class="nike-name">{{ userInfo.nikename }}</view>
				<view class="user-info">
					<text>{{ userInfo.follows }} 关注</text>
					|
					<text>{{ userInfo.followeds }} 粉丝</text>
					|
					<text>Lv.{{ userInfo.level || 1 }}</text>
				</view>
			</view>
		</view>

		<view class="lately-play">
			<view class="play-text">播放记录</view>
			<scroll-view scroll-x="true">
				<view class="play-item" v-for="(item, index) in latelyPlayList" :key="index" @tap="playSong(item.song.id)">
					<img :src="item.song.al.picUrl" alt="" />
					<text class="song">{{ item.song.name }}</text>
					<view class="singer-box">
						<text v-for="(itm, idx) in item.song.ar" :key="itm.id" class="singer">{{ itm.name }}{{ idx + 1 === item.song.ar.length ? ' ' : '/' }}</text>
					</view>
					<text class="iconfont iconbofang bofangIcon"></text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import musicHead from '@/components/music_head/music_head.vue';
import { getLatelyPlay, getUserLevel } from '@/common/api.js';
export default {
	components: {
		musicHead
	},
	data() {
		return {
			// 微信小程序胶囊按钮信息
			menuButtonInfo: {
				top: 20
			},
			// 播放记录
			latelyPlayList: [],
			// 用户信息
			userInfo: {}
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		/* 获取微信小程序胶囊按钮信息 */
		this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// #endif
		uni.getStorage({
			key: 'userInfo',
			success: res => {
				// 获取最近播放歌曲
				getLatelyPlay(res.data.userId).then(res => {
					console.log(res);
					this.latelyPlayList = res;
				});
				// 获取用户等级信息
				getUserLevel(res.data.userId).then(res => {
					console.log('等级', res);
					if (res[1].data.code === 200) {
						this.userInfo.level = res[1].data.data.level;
					}
				});
				// 用户信息
				this.userInfo = res.data;
			}
		});
	},
	methods: {
		/* 播放歌曲 */
		playSong(id) {
			let ids = this.latelyPlayList.map(item => {
				return { id: item.song.id };
			});
			this.$store.commit('init_topListIds', ids);
			uni.navigateTo({
				url: `/pages/detail/detail?songId=${id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.personal {
	height: 100vh;
	width: 100vw;
	background-color: #f3f3f3;
}
.personal-head {
	position: relative;
	margin: 80rpx 30rpx 100rpx;
	height: 300rpx;
	background-color: #ffffff;
	img {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width: 160rpx;
		height: 160rpx;
		top: -80rpx;
		border-radius: 50%;
	}
	.user-box {
		position: absolute;
		top: 100rpx;
		width: 100%;
		height: 140rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;

		.nike-name {
			font-size: 40rpx;
		}

		.user-info {
			color: #dddddd;
			text {
				padding: 0 10rpx;
				color: #333;
			}
		}
	}
}

.lately-play {
	margin: 0 30rpx;
	background-color: #fff;
	position: relative;
	.play-text {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -60rpx;
		font-size: 36rpx;
	}
	scroll-view {
		white-space: nowrap;
		height: 300rpx;
		width: 100%;
	}
	.play-item {
		display: inline-block;
		width: 300rpx;
		height: 300rpx;
		margin: 0 10rpx;
		position: relative;
		font-size: 28rpx;
		color: #fff;
		img {
			width: 100%;
			height: 100%;
		}
		.song {
			position: absolute;
			right: 6rpx;
			top: 6rpx;
			width: 100%;
			text-align: right;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
		.singer-box {
			position: absolute;
			right: 0;
			bottom: 0;
			background-color: #969696;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
		}
		.bofangIcon {
			font-size: 70rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
}
</style>
